<template>
  <div>
    <el-form ref="form" :model="form" label-width="140px">
      <!-- 所属分类 -->
      <el-form-item label="所属分类" prop="category_id">
        <el-select style="width:225px;" v-model="form.category_id" placeholder="请选择所属分类">
          <el-option
            v-for="catagoryList in catagoryList"
            :key="catagoryList.id"
            :label="catagoryList.name"
            :value="catagoryList.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- 商品名称 -->
      <el-form-item label="商品名称" prop="name">
        <el-input v-model="form.name" style="width:225px;"></el-input>
      </el-form-item>
      <!-- 所属品牌 -->
      <el-form-item label="所属品牌" prop="brand_id">
        <el-select style="width:225px;" v-model="form.brand_id" placeholder="请选择品牌">
          <el-option
            v-for="brandList in brandList"
            :key="brandList.id"
            :label="brandList.name"
            :value="brandList.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- 商品简介 -->
      <el-form-item label="商品简介" prop="goods_brief">
        <el-input type="textarea" v-model="form.goods_brief" style="width:225px;"></el-input>
      </el-form-item>
      <!-- 商品图片 -->
      <el-form-item label="商品图片" prop="primary_pic_url">
        <el-upload
          class="avatar-uploader"
          action
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :http-request="uploadImg"
        >
          <img v-if="form.primary_pic_url" :src="form.primary_pic_url" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          <div style="color:#8c939d;text-align:left;font-size:12px;">推荐图片尺寸：750*420</div>
        </el-upload>
      </el-form-item>
      <!-- 轮播图图片 -->
      <el-form-item label="轮播图图片" prop="gallerys">
        <el-upload
          action
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :http-request="uploadImgList"
          :file-list="form.gallerys"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>
      </el-form-item>
      <!-- 商品单位 -->
      <el-form-item label="商品单位" prop="goods_unit">
        <el-input v-model="form.goods_unit" style="width:225px;"></el-input>
      </el-form-item>
      <!-- 商品库存 -->
      <el-form-item label="商品库存" prop="goods_number">
        <el-input v-model="form.goods_number" style="width:225px"></el-input>
      </el-form-item>
      <!-- 商品售价 -->
      <el-form-item label="商品售价" prop="retail_price">
        <el-input v-model="form.retail_price" style="width:225px;"></el-input>
      </el-form-item>
      <!-- 推荐类型 -->
      <el-form-item label="推荐类型" prop="type">
        <el-checkbox-group v-model="form.type">
          <el-checkbox label="新品" name="type"></el-checkbox>
          <el-checkbox label="人气" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <!-- 上架 -->
      <el-form-item label="上架" prop="is_delete">
        <el-switch v-model="form.is_delete"></el-switch>
      </el-form-item>
      <!-- 排序 -->
      <el-form-item label="排序" prop="sort_order">
        <el-input v-model="form.sort_order" style="width:225px;"></el-input>
      </el-form-item>
      <!-- 确认保存 -->
      <el-form-item>
        <el-button type="primary" @click="onSubmit">确认保存</el-button>
        <el-button @click="cancle">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { PostGoodsInfo, UploadImgApi, GetCategory, GetBrand } from '../../request/api'
export default {
  data() {
    return {
      catagoryList: [],
      brandList: [],
      headers: {
        'X-Nideshop-Token': localStorage.getItem('token')
      },
      dialogVisible: false,
      dialogImageUrl: '',     //用来点击预览
      gallery: [],
      form: {
        primary_pic_url: '',
        category_id: '',
        name: '',
        brand_id: '',
        goods_brief: '',
        is_hot: 0,
        is_new: 0,
        goods_unit: '',
        goods_number: '',
        is_delete: false,
        retail_price: '',
        sort_order: '',
        type: [],
        list_pic_url: '',
        attribute: {
        },
        gallerys: []
      }
    }
  },
  computed: {

  },
  methods: {
    // 上传一张图片
    uploadImg(item) {
      //   console.log("item", item)
      let form = new FormData()
      form.append('good_pic', item.file)     //
      UploadImgApi(form).then(res => {
        console.log("返回图片路径", res)
        if (res.errno === 0) {
          this.form.primary_pic_url = res.data.fileUrl
        }
      })
    },

    // 商品图片
    handleAvatarSuccess(response, file, fileList) {
      //   console.log("response", response, file, fileList)
      this.primary_pic_url = response.data.fileUrl;
    },
    beforeAvatarUpload(file, fileList) {
      //   console.log("上传文件前的钩子", file, fileList);
    },

    // 轮播图

    uploadImgList(item) {
      console.log("item", item)
      var form = new FormData()
      form.append('good_pic', item.file)
      UploadImgApi(form).then(res => {
        if (res.errno === 0) {
          console.log(res.data.fileUrl)
          //   this.form.gallerys.push(res.data.fileUrl)
          //   this.form.gallerys = this.gallery
          this.gallery.push(res.data.fileUrl)
        }
        // console.log(this.form.gallerys)
      })

    },

    // 删除图片
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    // 预览图片
    handlePictureCardPreview(file) {
      console.log("预览图片", file)
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    // 
    onSubmit() {
      // 修改字段和值
      //   is_hot、is_new
      for (var i = 0; i < this.form.type.length; i++) {
        if (this.form.type[i] == "新品") {
          console.log("i", this.form.type[i])
          this.form.is_new = 1
        }
        if (this.form.type[i] == "人气") {
          this.form.is_hot = 1
        }
      }
      //   is_delete
      if (this.form.is_delete == false) {
        this.form.is_delete = 0
      } else {
        this.form.is_delete = 1
      }
      console.log("is_new", this.form.is_new)
      console.log("is_hot", this.form.is_hot)
      console.log("is_delete", this.form.is_delete)

      //   提交的接口
      console.log("提交:", this.form)

      PostGoodsInfo({
        brand_id: this.form.brand_id,
        category_id: this.form.category_id,
        goods_brief: this.form.goods_brief,
        goods_number: this.form.goods_number,
        goods_unit: this.form.goods_unit,
        is_delete: this.form.is_delete,
        is_hot: this.form.is_hot,
        is_new: this.form.is_new,
        list_pic_url: this.form.primary_pic_url,
        name: this.form.name,
        primary_pic_url: this.form.primary_pic_url,
        sort_order: this.form.sort_order,
        retail_price: this.form.retail_price,
        gallerys: this.gallery
      }).then(res => {
        console.log("提交成功", res)
        this.$router.go(-1)
      })
    },


    // 点击取消
    cancle() {
      console.log("点击了取消")
      this.$router.go(-1)
    }
  },
  created() {
    //   分类接口
    GetCategory({
      headers: this.headers
    }).then(res => {
      console.log("分类接口", res.data)
      this.catagoryList = res.data
    })
    //   品牌接口
    GetBrand({
      size: 100
    }).then(res => {
      console.log("品牌接口", res)
      this.brandList = res.data.data
    })

  }
}
</script>

<style lang='less' scoped>
.avatar-uploader .el-upload {
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 187px;
  height: 105px;
  line-height: 105px;
  text-align: center;
  border: 1px solid #dcdfe6;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>